var OutInRecord = function () {
  var template = /*html*/ `
    <div class="outin-record" v-loading.fullscreen.lock="loading">
      <div>
        <search-btn-view btn-text="查询记录" @before-open="resetSearch" @search="searchData">
          <div slot="search-content">
            <sys-common-search :search="search" request-url="putOutNew/getPutOutWarehouseOrderList" :search-field="searchFields" 
              label-width="auto" input-width="165px" :dropdown-props="{machining:'物料类型'}">
              <template slot="append">
                <el-form-item label="状态">
                  <el-select clearable style="width:165px;" placeholder="请选择状态" v-model="search.status">
                    <el-option v-for="status in statusList" :key="status.value" :label="status.name" :value="status.value"></el-option>
                  </el-select>
                </el-form-item>
              </template>
            </sys-common-search>
          </div>
        </search-btn-view>
      </div>

      <div v-if="user!==null" class="outin-record-table-div" :class="{'hasPage':pagination.totalCount!==0}">
        <el-table fit stripe border :data="putOutWarehouseDetailList" style="width:100%;" height="parent">
          <el-table-column :resizable="false" label="操作" width="150px" header-align="center">
            <template slot-scope="scope">
              <span v-if=" scope.row.inOutType===1 && scope.row.status===0 && hasApprovalAuthority">
                <el-button type="primary" size="mini" @click="approvalPutOutWarehouse(scope.row,1)">审核</el-button>
                <el-button type="danger" size="mini" @click="approvalPutOutWarehouse(scope.row,2)">退回</el-button>
              </span>
              <span v-if="canDelete(scope.row)">
                <el-button type="danger" size="mini" @click="deletePutOutWarehouse(scope.row)">删除</el-button>
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="orderId" label="系统编号" min-width="140px" header-align="center"></el-table-column>
          <el-table-column prop="companyOrderId" label="订单编号" min-width="140px" header-align="center"></el-table-column>
          <el-table-column prop="factoryId" label="工厂型号" min-width="120px" header-align="center"></el-table-column>
          <el-table-column prop="customerId" label="客户型号" min-width="120px" header-align="center"></el-table-column>
          <el-table-column prop="materialType" label="物料类型" min-width="150px" header-align="center">
            <template slot-scope="scope">
              <span v-if="!scope.row.hasEleOrder">{{scope.row.materialType}}</span>
              <el-popover v-else title="电镀详情" trigger="hover" placement="right-start">
                <div slot="reference">
                  {{scope.row.materialType}}(电镀)
                </div>
                <electroplate-detail :order="scope.row"></electroplate-detail>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="count" label="合格数" min-width="100px" align="center"></el-table-column>
          <el-table-column prop="noCount" label="不合格数" min-width="100px" align="center"></el-table-column>
          <el-table-column label="流转类型" min-width="80px" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.inOutType==1">入</span>
              <span v-else>出</span>
            </template>
          </el-table-column>
          <el-table-column prop="sourceName" label="流转源" min-width="100px" header-align="center"></el-table-column>
          <el-table-column label="状态" min-width="60px" align="center">
            <template slot-scope="scope">
              <span v-if=" scope.row.status===0">未审核</span>
              <span v-else-if=" scope.row.status===1">已审核</span>
              <span v-else>已退回</span>
            </template>
          </el-table-column>
          <el-table-column label="可审核人" min-width="140px" header-align="center">
            <template slot-scope="scope">
              <span v-for="name in scope.row.approvalNameList" :key="name">{{name}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="createUser" label="制单人" min-width="100px" header-align="center"></el-table-column>
          <el-table-column prop="createTime" label="制单时间" min-width="100px" align="center"></el-table-column>
          <el-table-column prop="approvalUser" label="审核人" min-width="100px" header-align="center"></el-table-column>
          <el-table-column prop="approvalTime" label="审核时间" min-width="100px" align="center"></el-table-column>
          <el-table-column show-overflow-tooltip prop="remark" label="备注" min-width="150px" header-align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.remarkHtml!==''" v-html="scope.row.remarkHtml"></span>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <table-pagination v-if="pagination.totalCount!==0" :pagination="pagination" @change="pageChange">
      </table-pagination>
    </div>
  `;
  return {
    mixins: [
      tablePaginationMixin()
    ],

    data: function () {
      var search = {
        orderId: '',
        companyOrderId: '',
        factoryId: '',
        customerId: '',
        customerOrderId: '',
        machining: '',
        status: ''
      };
      return {
        loading: false,
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        searchFields: ['orderId', 'companyOrderId', 'factoryId', 'customerId', 'customerOrderId', 'machining'],
        putOutWarehouseDetailList: [],
        materialMachingMap: {},
        statusList: [{
          name: '未审核',
          value: 0
        }, {
          name: '已审核',
          value: 1
        }, {
          name: '已退回',
          value: 2
        }],
        user: null,
        hasApprovalAuthority: false
      };
    },
    created: function () {
      this.loading = true;
      var self = this;
      Promise.all([
        this.setMaterialMachingMap(),
        this.setUser()
      ]).then(function () {
        self.setPutWarehouseDetail(true).then(function () {
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      });
    },

    methods: {
      setMaterialMachingMap: function () {
        var self = this;
        return ModuleUtil.getMaterialMachingMap().then(function (materialMachingMap) {
          self.materialMachingMap = materialMachingMap;
          return materialMachingMap;
        }).catch(function () {
          return {};
        });
      },
      canDelete: function (order) {
        var status = order.status;
        var inOutType = order.inOutType;
        if (status !== 2) {
          return false;
        }
        if (inOutType != 2) {
          return false;
        }
        var user = this.user;
        return user.userName === order.createUser;
      },

      setPutWarehouseDetail: function (isSearch) {
        var self = this;
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }
        var search = this.search;
        var postData = {
          materialType: search.machining
        };
        var fields = ['orderId', 'companyOrderId', 'factoryId', 'customerId', 'customerOrderId', 'status'];
        SysUtil.setPostData(postData, search, fields, true, true);
        postData.start = (this.pagination.currentPage - 1) * this.pagination.pageSize;
        postData.length = this.pagination.pageSize;

        return ajaxRequest("putOutNew/getPutWarehouseDetail", postData).then(function (res) {
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }
          var returnDataList = res.returnData;

          var orderGroup = _.groupBy(returnDataList, 'typeId');
          var orders = [];
          var materialMachingMap = self.materialMachingMap;
          for (var typeId in orderGroup) {
            var orderGroupList = orderGroup[typeId];
            var order = orderGroupList[0];
            order = _.cloneDeep(order);
            var type = order.type;
            if (type != 0) {
              if (type === -1) {
                materialType = '整架';
              } else {
                materialType = materialMachingMap[type];
              }
              order.materialType = materialType;
              var color = ModuleUtil.getOutOrderFrameColor(orderGroupList);
              order.color = color;
            }
            order.id = typeId;

            for (var i = 0; i < orderGroupList.length; i++) {
              var obj = orderGroupList[i];
              obj.maching = obj.materialType;
            }

            var remark = order.remark;
            if (SysUtil.isEmpty(remark)) {
              remark = '';
            } else {
              remark = remark.replace(/\n/g, '<br>').replace(/ /g, '&nbsp;');
            }
            order.remarkHtml = remark;

            order.mergeOrders = orderGroupList;
            order.hasEleOrder = order.additionalMaterialType !== '';

            orders.push(order);
          }
          self.pagination.totalCount = res.iTotalRecords;
          self.putOutWarehouseDetailList = orders;
          return orders;
        }).catch(function () {});
      },

      setUser: function () {
        var self = this;
        return SysUtil.getUser().then(function (user) {
          self.user = user;
          var flag = PermissionUtil.validateAuthorityByUser(user, 'putOutNew/approvalPutOutWarehouse');
          self.hasApprovalAuthority = flag;
          return user;
        }).catch(function () {
          return null;
        });
      },

      resetWarehouseDetail: function (isSearch) {
        this.loading = true;
        var self = this;
        this.setPutWarehouseDetail(isSearch).then(function () {
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      pageChange: function () {
        this.resetWarehouseDetail();
      },

      resetSearch: function () {
        this.search = _.cloneDeep(this.oldSearch);
      },

      searchData: function () {
        this.pagination.currentPage = 1;
        this.resetWarehouseDetail(true);
      },

      approvalPutOutWarehouse: function (warehouse, status) {
        var self = this;
        var param = {
          id: warehouse.typeId,
          status: status
        }
        this.loading = true;
        ajaxRequest("putOutNew/approvalPutOutWarehouse", param).then(function (res) {
          self.loading = false;
          self.$message({
            showClose: true,
            message: res,
            type: 'success'
          });
          self.pageChange();
        }).catch(function () {
          self.loading = false;
        });
      },
      deletePutOutWarehouse: function (warehouse) {
        var self = this;
        var param = {
          id: warehouse.typeId
        }
        this.loading = true;
        ajaxRequest("putOutNew/deletePutOutWarehouse", param).then(function (res) {
          self.loading = false;
          self.$message({
            showClose: true,
            message: res,
            type: 'success'
          });
          self.pageChange();
        }).catch(function () {
          self.loading = false;
        });
      }
    },

    components: {
      SearchBtnView: SearchBtnView,
      SysCommonSearch: SysCommonSearch,
      ElectroplateDetail: ElectroplateDetail
    },

    template: template
  };
}();
